.lv-pro-status {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.lv-pro-status-icon {
  flex: none;
  display: block;
  margin-right: 8px;
}

.lv-pro-status-dot {
  flex: none;
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 100%;

  .lv-pro-status-animate-dot {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    animation: statusRipple 1.2s infinite ease-in-out;
  }
}

.lv-pro-status-label {
  display: block;
  width: calc(100% - 20px);
}

.lv-pro-status-animate {
  .lv-pro-status-dot {
    .lv-pro-status-animate-dot {
      display: block;
    }
  }

  .lv-pro-status-icon {
    animation: statusRotation 2s linear infinite;
  }
}

@keyframes statusRotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes statusRipple {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8;
  }
  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}
